<template>
    <div class="solve">
        <Nav>
            <div slot="left" >×</div>
            <div slot="center">解决方案</div>
            <div slot="right" >···</div>
        </Nav>
        <router-view v-show="!isActive" @getSolveData="getSolveData"></router-view>
        <div class="main" :style="bgc">
            <solve-header></solve-header>
            <solve-body v-show="isNull"></solve-body>

            <member-list :message="solution"></member-list>
           
        </div>   
        <main-tab-bar class="tab-bar-bottom"></main-tab-bar>
    </div>
</template>

<script>
import Nav from '@/components/common/Nav.vue';
import SolveHeader from './SolveHeader';
import SolveBody from './SolveBody';
import MemberList from './MemberList';
import MainTabBar from '@/components/tabbar/MainTabBar';
import {request} from '@/network/request.js';
    export default {
        data() {
            return {
                isActive:false,
                path:'/solve',
                isNull:true,
                solution:[]
            }
        },
        components: {
            Nav,
            SolveHeader,
            SolveBody,
            MemberList,
            MainTabBar
        },
        computed: {
            bgc() {
                return this.$route.path === this.path ?{backgroundColor: '#fff'}:{backgroundColor: 'rgba(0,0,0,.3)'}
            }
        },
        created () {
            if(this.$store.state.close){
                 this.getSolveData();
            }
            // 判断当前路由是否应该去请求数据
            else if(this.$route.path === "/solve" ){
                this.getSolveData();
            }
        },
        methods: {
           async getSolveData(){   
               try{
                    let res= await request({
                    url: 'api/solution/index',
                    })
                    this.solution = res.data.data;
                    if(this.solution.length !== 0 ){
                        this.isNull = false
                    }
                 }catch{
                     this.getSolveData()
                 }
                 
            }
                 
        },
    }
</script>

<style scoped>
.solve{
    position: relative;
    height: 100vh;
    
}
.main{
    padding-top: 64px;
    
    height: calc(100% - 110px);
    
}
/* .main.active{
    background-color: rgba(0,0,0,.3);
} */
</style>